<template>
    <view class="technician-info order-pages rel" v-if="detail.id">
        <!-- <back></back> -->
        <banner
            @change="goBanner"
            :list="detail.banner"
            :margin="0"
            :autoplay="true"
            :height="717"
            v-if="detail.banner.length > 0"
        >
        </banner>
        <view class="abs flex-between pd-sxm-lr" style="top: 25rpx; left: 0; width: 100%">
            <view class="radios_box transparent">返</view>
            <view class="flex-between">
                <view class="radios_box transparent">首</view>
                <view class="radios_box ml-sm transparent">个</view>
            </view>
        </view>
        <view class="abs pd-sxm-lr" style="top: 550rpx; right: 0">
            <view class="radios_box mr-sm transparent">喜</view>
        </view>
        <view class="abs flex-between pd-sxm-lr" style="top: 610rpx; left: 0; width: 100%">
            <view class="radios_lbox transparent">真人实拍87%相似</view>
            <view class="flex-between">
                <view class="radios_box transparent">左</view>
                <view class="ml-sm radios_bigbox transparent">下</view>
            </view>
        </view>
        <!-- <view class="ft-label flex-y-center f-paragraph">
			<view class="ft-time flex-center c-base pl-lg pr-lg pt-md pb-md rel" >
				<view class="ft-bg abs" :style="{background:primaryColor}"></view>
				<view @tap.stop="toJump('ftList')" v-for="(item) in ftList" class="ft">
					<i class="iconfont" :class="item.icon" :style="{color:primaryColor}"></i>
					<span class="c-title ml-sm">{{ item.text }}</span>
				</view>
			</view>
		</view>		 -->
        <view class="pd-lg fill-base">
            <view class="flex-between">
                <view class="flex-between">
                    <view class="f-title c-black text-bold max-500">{{
                        detail.coach_name || "-"
                    }}</view>
                    <view
                        class="time-label flex-y-center ml-md f-icontext c-base"
                        v-if="detail.near_time"
                        :style="{ border: `1rpx solid ${primaryColor}` }"
                    >
                        <view class="near-text flex-center" :style="{ background: primaryColor }"
                            >今日可约</view
                        >
                        <view
                            class="near-time flex-center c-base rel"
                            :style="{ color: primaryColor }"
                        >
                            <view class="bg abs" :style="{ background: primaryColor }"></view>
                            {{ detail.near_time }}
                        </view>
                    </view>
                </view>
                <view @tap.stop="toShield" class="flex-y-center">
                    <!-- <view class="like-label flex-center mr-sm radius"
						:style="{background:detail.is_shield?'#FF8D4C':''}">
						<i class="iconfont"
							:class="[{'iconbuxihuan c-caption':!detail.is_shield},{'iconbuxihuan-xuanzhong c-base':detail.is_shield}]"></i>
					</view> -->
                    <i class="iconfont iconjuli" :style="{ color: primaryColor }"></i>
                    <view class="c-title ml-sm f-title text-bold">2.3km</view>
                </view>
            </view>
            <view class="flex-y-center mt-sm flex-between">
                <view class="flex-y-center mt-sm">
                    <view class="service-label flex-center f-icontext">
                        <!-- {{textType[detail.text_type]}} -->
                        实名认证
                        <!-- New-->
                    </view>
                    <view class="service-label flex-center f-icontext">
                        <!-- {{textType[detail.text_type]}} -->
                        {{ detail.native_place }}
                    </view>
                    <view class="service-label flex-center f-icontext">
                        <!-- {{textType[detail.text_type]}} -->
                        {{ detail.age }}岁
                    </view>
                </view>
                <auth
                    @tap.stop.prevent
                    :needAuth="userInfo && (!userInfo.phone || !userInfo.nickName)"
                    :must="true"
                    :type="!userInfo.phone ? 'phone' : 'userInfo'"
                    @go="toEmit('order')"
                    style="width: 130rpx"
                >
                    <view
                        class="item-btn f-icontext pd-sm flex-center c-base radius-24"
                        :style="{
                            background: `linear-gradient(68deg, ${primaryColor}, ${subColor})`,
                        }"
                    >
                        立即预约
                    </view>
                </auth>
            </view>
            <view class="flex-between mt-lg f-icontext c-caption">
                <!-- <block v-if="(detail.store_id && detail.store_name) || (detail.admin_id && detail.admin_name)">
					<view @tap.stop="goStoreMerchant" class="flex-y-center">
						<i class="iconfont icondianpu"></i>
						<view class="ellipsis" style="max-width: 250rpx;">{{ detail.store_name || detail.admin_name }}
						</view>
					</view>
					<view class="line"></view>
				</block>
				<view class="flex-y-baseline">
					<i class="iconfont iconpingfen1 icon-font-color"></i>
					<view class="star-text flex-y-center f-caption">{{ detail.star || 0 }}</view>
				</view>
				<view class="line"></view>
				<view>已服务{{ detail.order_num > 9999 ? '9999+' : detail.order_num }}单</view>
				<view class="line"></view>
				<view>从业{{ detail.work_time }}年</view> -->
                <view class="text-bold c-black">遇江南</view>
                <view style="font-size: 15rpx">33人已关注</view>
            </view>
        </view>
        <view class="fill-base mt-md pt-lg pl-lg pr-md">
            <!-- <view class="pb-lg f-paragraph c-black text-bold">{{ `${$t('action.attendantName')}简介` }}</view> -->
            <view class="flex-center">
                <view style="width: 100rpx">相册</view>
                <scroll-view scroll-x class="picture-list">
                    <view
                        @tap.stop="toPreviewImage(index, 'self_img')"
                        class="picture-item"
                        v-for="(item, index) in detail.self_img"
                        :key="index"
                    >
                        <!-- #ifdef H5 -->
                        <view class="cover radius-16">
                            <view
                                class="h5-image cover radius-16"
                                :style="{ backgroundImage: `url('${item}')` }"
                            >
                            </view>
                        </view>
                        <!-- #endif -->
                        <!-- #ifndef H5 -->
                        <image
                            mode="aspectFill"
                            lazy-load
                            class="cover radius-16"
                            :src="item"
                        ></image>
                        <!-- #endif -->
                    </view>
                </scroll-view>
            </view>
            <view class="flex-center mt-sm">
                <view class="flex-1" style="text-align: left"
                    >属相：{{ detail.zodiac_animal }}</view
                >
                <view class="flex-1" style="text-align: left"
                    >星座：{{ detail.constellation }}</view
                >
                <view class="flex-1" style="text-align: left">性别：{{ detail.ethnic_group }}</view>
            </view>
            <view class="flex-center mt-sm">
                <view class="flex-1" style="text-align: left">民族：{{ detail.ethnic_group }}</view>
                <view class="flex-1" style="text-align: left">入驻：{{ detail.rz_time }}</view>
                <view class="flex-1" style="text-align: left">手法：{{ detail.star }}星</view>
            </view>
            <view class="flex-center mt-sm">
                <view class="flex-1" style="text-align: left">身高：{{ detail.height }}cm</view>
                <view class="flex-1" style="text-align: left">体重：{{ detail.weigh }}kg</view>
                <view class="flex-1"></view>
            </view>
            <view class="introduce-info pt-md f-paragraph c-title radius-16">
                <span v-if="!detail.showText">{{ detail.text.substring(0, 100000) }}</span>
                <view v-else>
                    <text decode="emsp" style="word-break: break-all">{{ detail.text }}</text>
                </view>
                <span
                    @tap.stop="toShowHide('showText')"
                    :class="[{ 'ml-md': !detail.showText }, { 'mt-md': detail.showText }]"
                    :style="{ color: primaryColor }"
                    v-if="detail.have_show_text"
                >
                </span>
            </view>
            <view
                class="flex-y-center mt-md flex-between pd-sm"
                style="background-color: rgb(253, 250, 243)"
            >
                <view class="flex-between"
                    ><i class="iconfont iconpingfen1 icon-font-color"></i>营业执照</view
                >
                <view class="flex-between"
                    ><i class="iconfont iconpingfen1 icon-font-color"></i>健康证</view
                >
                <view class="flex-between"
                    ><i class="iconfont iconpingfen1 icon-font-color"></i>按摩师证</view
                >
                <view class="flex" style="font-size: 20rpx"
                    >查看<i class="iconfont iconpingfen1 icon-font-color"></i
                ></view>
            </view>
        </view>
        <!-- <view class="fill-base mt-md pt-lg pl-lg pr-md pb-lg">
			<view class="pb-lg f-paragraph c-black text-bold">资质证书</view>
			<scroll-view scroll-x class="picture-list">
				<view @tap.stop="toPreviewImage(index, 'license')" class="picture-item"
					v-for="(item, index) in detail.license" :key="index">
					#ifdef H5
					<view class="cover radius-16">
						<view class="h5-image cover radius-16" :style="{ backgroundImage: `url('${item}')` }">
						</view>
					</view>
					#endif
					#ifndef H5
					<image mode="aspectFill" lazy-load class="cover radius-16" :src="item"></image>
					#endif


				</view>
			</scroll-view>
		</view> -->
        <view class="fill-base mt-md pt-lg pb-lg">
            <view
                @tap.stop="$util.goUrl({ url: `/shopstore/pages/service?id=${options.id}` })"
                class="flex-between pl-lg pr-md"
                :class="[{ 'pb-lg': serviceList.length > 0 }]"
            >
                <view class="f-paragraph c-black text-bold">她服务的项目</view>
                <view @tap.stop="toComment" class="flex-y-center f-caption c-caption"
                    >xx条评论<text style="color: rgb(182, 88, 84); margin-left: 20rpx"
                        >好评率xx%</text
                    ><i class="iconfont icongengduo" style="font-size: 24rpx"></i
                ></view>
            </view>

            <view
                class="pl-lg pr-lg b-1px-b mt-md pb-md"
                v-for="(item, index) in serviceList"
                :key="index"
            >
                <service-list-item
                    @order="toOrder(index)"
                    from="technician-info"
                    :info="item"
                    maxWidth="490rpx"
                ></service-list-item>
            </view>
        </view>
        <view class="space-footer"></view>
        <technician-list-popup
            ref="technician_list_popup"
            from="technician-info"
        ></technician-list-popup>
    </view>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import serviceListItem from "./components/service-list-item.vue";
import technicianListPopup from "./components/technician-list-popup.vue";
export default {
    components: {
        serviceListItem,
        technicianListPopup,
    },
    data() {
        return {
            options: {},
            textType: {
                1: "可服务",
                2: "服务中",
                3: "可预约",
                4: "不可预约",
            },
            ftList: [
                {
                    icon: "icon-kzj",
                    text: "实名认证",
                },
                {
                    icon: "icon-kpk",
                    text: "爽约包赔",
                },
                {
                    icon: "icon-sybp",
                    text: "超时秒退",
                },
                {
                    icon: "icon-kzz",
                    text: "资质证书",
                },
            ],
            detail: {},
            serviceList: [],
            loading: true,
        };
    },
    computed: mapState({
        primaryColor: (state) => state.config.configInfo.primaryColor,
        subColor: (state) => state.config.configInfo.subColor,
        configInfo: (state) => state.config.configInfo,
        userInfo: (state) => state.user.userInfo,
    }),
    onLoad(options) {
        this.options = options;
        this.initIndex();
    },
    onPullDownRefresh() {
        // #ifndef APP-PLUS
        uni.showNavigationBarLoading();
        // #endif
        this.initRefresh();
        uni.stopPullDownRefresh();
    },
    methods: {
        ...mapActions(["getConfigInfo", "getUserInfo"]),
        ...mapMutations(["updateTechnicianItem", "updateUserItem"]),
        async initIndex() {
            // #ifdef H5
            if (this.$jweixin.isWechat()) {
                await this.$jweixin.initJssdk();
                this.$jweixin.wxReady(() => {
                    this.$jweixin.hideOptionMenu();
                });
            }
            // #endif
            await this.getDetail();
            this.$util.setNavigationBarColor({
                bg: this.primaryColor,
            });
            uni.setNavigationBarTitle({
                title: this.$t("action.attendantName") + "详情",
            });
            await this.getList();
        },
        initRefresh() {
            this.initIndex(true);
        },
        async getDetail() {
            let { id } = this.options;
            let data = await this.$api.service.coachInfo({
                id,
            });
            data.banner = data.video
                ? [
                      {
                          jump_type: "video",
                          img: data.work_img,
                          jump_url: data.video,
                      },
                  ]
                : [
                      {
                          img: data.work_img,
                      },
                  ];
            let have_show_text = data.text.length > 42;
            data.have_show_text = have_show_text;
            data.showText = !have_show_text;
            this.detail = data;
            console.log(this.detail, "获取到的数据");
        },
        async getList() {
            let { id: coach_id } = this.options;
            let { data } = await this.$api.service.coachServiceList({
                coach_id,
            });
            this.serviceList = data;
            this.loading = false;
            this.$util.hideAll();
        },
        async toShield() {
            let { id } = this.options;
            await this.$api.mine.shieldCoachAdd({
                type: 2,
                coach_id: id,
            });
            this.updateUserItem({
                key: "haveShieldOper",
                val: 2,
            });
            this.$util.back();
            setTimeout(() => {
                this.$util.goUrl({
                    url: 1,
                    openType: `navigateBack`,
                });
            }, 1000);
        },
        // 预约
        async toOrder(index) {
            let { is_work = 0 } = this.detail;
            if (!is_work) {
                this.$util.showToast({
                    title: `该${this.$t("action.attendantName")}未上班`,
                });
                return;
            }
            let { id: service_id } = this.serviceList[index];
            let { id: coach_id } = this.options;
            if (this.lockTap) return;
            this.lockTap = true;
            try {
                await this.$api.order.addCar({
                    service_id,
                    coach_id,
                    num: 1,
                    is_top: 1,
                    coach_service: 1,
                });
                this.lockTap = false;
                let url = `/user/pages/order?id=${coach_id}&ser_id=${service_id}`;
                this.$util.goUrl({
                    url,
                });
            } catch (e) {
                this.lockTap = false;
            }
        },
        toShowHide(key) {
            this.detail[key] = !this.detail[key];
        },
        toComment() {
            this.$refs.technician_list_popup.toShowPopup(this.detail, "message");
        },
        toPreviewImage(index, key = 0) {
            let urls = this.detail[key];
            if (key == "work_img") {
                urls = [urls];
            }
            this.$util.previewImage({
                current: urls[index],
                urls,
            });
        },
        goStoreMerchant() {
            let { store_id, admin_id } = this.detail;
            let url = store_id
                ? `/shopstore/pages/detail?id=${store_id}`
                : `/user/pages/merchant-info?id=${admin_id}`;
            this.$util.goUrl({
                url,
            });
        },
        goBanner() {
            console.log("123465");
        },
    },
};
</script>

<style lang="scss">
.technician-info {
    .cover-img {
        width: 750rpx;
        height: 417rpx;
    }

    .radios_box {
        width: 60rpx;
        height: 60rpx;
        border-radius: 45rpx;
        text-align: center;
        line-height: 60rpx;
    }

    .radios_lbox {
        line-height: 40rpx;
        padding: 5rpx 30rpx;
        font-size: 25rpx;
        border-radius: 25rpx;
    }

    .radios_bigbox {
        width: 90rpx;
        height: 90rpx;
        border-radius: 45rpx;
        text-align: center;
        line-height: 90rpx;
    }
    .transparent {
        background: rgba(0, 0, 0, 0.25);
        color: white;
    }

    .like-label {
        width: 42rpx;
        height: 42rpx;
        background: #efefef;

        .iconfont {
            font-size: 24rpx;
            margin-top: 5rpx;
        }
    }

    .service-label {
        min-width: 88rpx;
        height: 32rpx;
        padding: 0 10rpx;
        color: rgb(166, 143, 123);
        background: rgb(253, 248, 239);
        border-radius: 4rpx;
        margin-right: 20rpx;
    }

    .time-label {
        .near-text {
            width: 110rpx;
            height: 38rpx;
            background: #f5f5f5;
            border-radius: 3rpx 0 0 3rpx;
        }

        .near-time {
            width: 110rpx;
            height: 38rpx;
            border-radius: 0 3rpx 3rpx 0;

            .bg {
                opacity: 0.1;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 1;
                border-radius: 0 3rpx 3rpx 0;
            }
        }
    }

    .ft-label {
        .near-text {
            width: 100%;
            height: 33rpx;
            background: #f5f5f5;
        }

        .ft-time {
            width: 100%;
            height: 76rpx;

            .ft-bg {
                opacity: 0.1;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 1;
                border-radius: 10rpx;
            }
        }

        .ft {
            display: flex;
            align-items: center;
            width: 100%;
        }

        .tp-img {
            width: 183px;
            height: 16px;
        }
    }

    .icondianpu {
        margin-right: 6rpx;
    }

    .iconpingfen1 {
        font-size: 24rpx;
        background-image: -webkit-linear-gradient(270deg, #fad961 0%, #f76b1c 100%);
    }

    .star-text {
        height: 26rpx;
        color: #ff9519;
        margin-left: 6rpx;
    }

    .line {
        width: 1rpx;
        height: 11rpx;
        background: #979797;
        margin: 0 18rpx;
    }

    .introduce-info {
        width: 690rpx;
    }

    .picture-list {
        white-space: nowrap;
        width: 690rpx;

        .picture-item {
            width: 122rpx;
            margin-left: 20rpx;
            display: inline-block;

            .cover {
                width: 122rpx;
                height: 122rpx;
            }
        }

        .picture-item:nth-child(1) {
            margin-left: 0;
        }
    }

    .comment-item {
        .avatar {
            width: 52rpx;
            height: 52rpx;
            background: #f4f6f8;
        }

        .iconpingfen1 {
            font-size: 28rpx;
            margin-right: 5rpx;
            font-size: 28rpx;
        }
    }

    .top_rz {
        width: 100%;
        height: 30px;
    }

    .image_loading {
        width: 100%;
        height: 100%;
    }
}
</style>
